<template>
    <div class="am-content">
        <div class="detail-info-box">
            <ul class="detail-info">
                <li><span>报警人姓名: </span> <span>{{ alarmRecord.userName }}</span></li>
                <li><span>性别: </span> <span>{{ alarmRecord.sex }}</span></li>
                <li><span>身份证号: </span> <span>{{ alarmRecord.idCard }}</span></li>
                <li><span>手机号码: </span> <span>{{ alarmRecord.phone }}</span></li>
                <li><span>定位: </span> <span>{{ alarmRecord.address }}</span></li>
                <li><span>报警时间:</span> <span>{{ alarmRecord.alarmDate }}</span></li>
                <li><span>详情描述:</span> <span>{{ alarmRecord.context }}</span></li>
                <li>
                    <span>相关图片:</span>
                    <template v-for="(item, index) in imagePaths">
                        <img style="display:inline-block; width: 100px; height: 100px; margin: 0px 6px; cursor: pointer; vertical-align: text-top" v-bind:key="index" :src="item" alt="" v-on:click="handleImagePreview">
                    </template>
                </li>
                <li class="layout-row-center">
                    <span>语音:</span>
                    <template v-for="(item, index) in alarmRecord.voices">
                        <video v-bind:key="index" width="300px" height="50px" v-bind:src="item | fileFilter" controls="controls"></video>
                    </template>
                </li>
                <li class="layout-row">
                    <span>视频:</span>
                    <template v-for="(item, index) in alarmRecord.videos">
                        <video v-bind:key="index" width="500px" height="500px" v-bind:src="item | fileFilter" controls="controls"></video>
                    </template>
                </li>
            </ul>
            <ul class="detail-info">
                <li><span>接警民警: </span> <span>{{ alarmRecord.officerName }}</span></li>
                <li><span>警号: </span> <span>{{ alarmRecord.officerAccount }}</span></li>
                <li><span>隶属部门: </span> <span>{{ alarmRecord.deptName }}</span></li>
            </ul>
        </div>
        <div class="videos">
            <template v-for="(item, index) in alarmRecord.videoSrcList">
                <video v-bind:key="index" width="500px" height="500px" v-bind:src="item | fileFilter" controls="controls"></video>
            </template>
        </div>
        <image-viewer v-if="showViewer" :url-list="imagePaths" :on-close="closeViewer"/>
    </div>
</template>

<script>
    import CommonFilters from "@/mixins/CommonFilters";
    import ImageViewer from "element-ui/packages/image/src/image-viewer";
    import HttpConnection from "@/util/HttpConnection";
    import {uploadImage} from "@/config/env";

    export default {
        name: "SwindleRecordDetail",
        mixins: [CommonFilters],
        components: { ImageViewer},
        data() {
            return {
                alarmRecord: {},
                showViewer: false,
                imagePaths: []
            };
        },
        mounted() {
            let that = this;
            HttpConnection.get("/api-bureau/portal/acceptance/fraudDetail", {
                params: {
                    id: that.$route.query.id
                }
            }).then(function(response) {
                that.alarmRecord = response.data;
                let _imagePaths = [];
                for (let item of response.data.images) {
                    _imagePaths.push(uploadImage + item);
                }
                that.imagePaths = _imagePaths;
            });
        },
        methods: {
            handleImagePreview() {
                this.showViewer = true;
            },
            closeViewer() {
                this.showViewer = false;
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.am-content {
  padding: 20px;
  background-color: #ffffff;
}

ul {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style-type: none;
}

.detail-info-box {
    display: flex;
    flex-direction: row;
    border: 1px solid #e8e8e8;
    padding: 20px 0px;
    margin: 0px 0px 40px 0px;
}

.detail-info {
    li {
        margin: 10px 0px 10px 0px;
        color: #333333;

        span:nth-of-type(1) {
            display: inline-block;
            width: 100px;
            text-align: right;
            margin: 0px 6px 0px 0px;
        }
    }
}

.videos {
    video {
        margin: 0px 20px;
    }
}
</style>
